<template>
  <el-row>
    <el-col :span="4" class="sea-card">
      <div style="border: 1px solid lightgray; border-right: 0">
        <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            text-color="#000"
            active-text-color="#ffd04b"
            @select="handleOpen">
          <el-submenu index="1">
            <template slot="title"><i class="fa fa-fw fa-bug"></i> <span>目录结构说明</span></template>
            <el-menu-item index="/static/md/src.md">src</el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"><i class="fa fa-fw fa-bug"></i> <span>文档分类2</span></template>
            <el-menu-item index="/static/md/example1.md">src目录</el-menu-item>
            <el-menu-item index="/static/md/example2.md">博客2</el-menu-item>
          </el-submenu>
        </el-menu>
      </div>
    </el-col>
    <el-col :span="20" class="sea-card">
      <markdown :value="content" :is-preview="true">{{ content }}</markdown>
    </el-col>
  </el-row>
</template>

<script>
import Markdown from 'vue-meditor'
import resource from "../../../../starter/resource";

export default {
    components: {
        Markdown
    },
    data() {
        return {
            content: ''
        }
    },
    created() {
    }, methods: {
        handleOpen(key, arr) {
            if(arr.length > 0){
                resource.get(arr[arr.length - 1]).then(e => this.content = e);
            }
        }
    }
}
</script>